<template>
  <div class="container">
    <el-row :gutter="20" class="rowAA">
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <span
            >【题型】:
            {{ questionTypeList[questionList.questionType - 1] }}</span
          >
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <span>【编号】: {{ questionList.id }}</span>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <span
            >【难度】: {{ difficultyList[questionList.difficulty - 1] }}</span
          >
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <span>【标签】: {{ questionList.tags }}</span>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <span>【学科】: {{ questionList.subject }}</span>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <span>【目录】: {{ questionList.catalog }}</span>
        </div></el-col
      >
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <span>【方向】: {{ questionList.direction }}</span>
        </div></el-col
      >
    </el-row>
    <hr class="hhh" />
    <p>【题干】</p>
    <div class="questionText" v-html="questionList.question"></div>
    <!-- 单选题 -->
    <div v-if="questionList.questionType === '1'">
      <p>单选题 选项 : (以下选中的选项为正确答案))</p>
      <el-radio-group>
        <el-radio label="A">{{ 1 }}</el-radio>
        <el-radio label="B">{{ 2 }}</el-radio>
        <el-radio label="C">{{ 3 }}</el-radio>
        <el-radio label="D">{{ 4 }}</el-radio>
      </el-radio-group>
    </div>
    <!-- 多选题 -->
    <div v-else-if="questionList.questionType === '2'">
      <p>多选题 选项 : (以下选中的选项为正确答案))</p>
      <el-checkbox-group v-model="checkList">
        <el-checkbox label="复选框 A"></el-checkbox>
        <el-checkbox label="复选框 B"></el-checkbox>
        <el-checkbox label="复选框 C"></el-checkbox>
        <el-checkbox label="复选框 C"></el-checkbox>
        <el-checkbox label="复选框 C"></el-checkbox>
      </el-checkbox-group>
    </div>
    <!-- 简答题 -->
    <div v-else></div>
    <hr />
    <div>
      <span>【参考答案】</span>
      <el-button type="danger" @click="onVideo">视屏答案预览</el-button>
      <div class="preview-video" v-if="isVideoShow">
        <video
          src="https://v-cdn.zjol.com.cn/277004.mp4"
          controls="controls"
          autoplay
          class="video"
        ></video>
      </div>
    </div>
    <hr />
    <p>【答案解析】: <span v-html="questionList.answer"></span></p>
    <hr />
    <p>【题目备注】: {{ questionList.remarks }}</p>
  </div>
</template>

<script>
export default {
  name: 'QuestionPreview',
  data() {
    return {
      checkList: [], // 复选框
      isVideoShow: false,
      questionTypeList: ['单选', '多选', '简单'],
      difficultyList: ['简单', '一般', '困难']
    }
  },
  props: {
    questionList: {
      type: Object,
      required: true
    }
  },
  methods: {
    onVideo() {
      if (!this.questionList.videoURL) {
        return
      }
      this.isVideoShow = true
    }
  }
}
</script>

<style scoped lang="less">
/deep/.rowAA {
  .el-col {
    &:nth-child(n + 5) {
      margin-top: 30px;
    }
  }
}
.hhh {
  margin-top: 30px;
}
.questionText {
  color: blue;
}
.el-radio-group {
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.el-checkbox-group {
  height: 125px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.preview-video {
  width: 500px;
  height: 280px;
  // background-color: skyblue;
  margin-top: 20px;
  .video {
    width: 100%;
    height: 100%;
  }
}
</style>
